<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/templateAdmin.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="windowTitle">SAMUPG :: Gestión de períodos</ui:define>

    <ui:define name="content">
        <h3 style="margin-left: 4px;">Gestión de períodos</h3>
        <p:growl id="growl" />
        <h:form id="form" prependId="false">

            <p:commandButton value="Ingresar nuevo período" icon="ui-icon-plusthick"
                             onclick="cardlgNuevoPeriodo.show();"/>

            <p:dataTable id="dtPeriodos"
                         value="#{gestionarPeriodosAdmisionController.listPeriodos}"
                         var="periodo" paginator="true" 
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="15,20,30">

                <p:column>
                    <f:facet name="header">Período</f:facet>
                    <h:outputText value="#{periodo.nombre}" />
                </p:column>

                <p:column>
                    <f:facet name="header">Fecha de apertura</f:facet>
                    <h:outputText value="#{periodo.fechaApertura}" />
                </p:column>

                <p:column>
                    <f:facet name="header">Fecha de cierre</f:facet>
                    <h:outputText value="#{periodo.fechaCierre}" />
                </p:column>

                <p:column>
                    <f:facet name="header">Condición</f:facet>
                    <h:outputText value="Cerrado" rendered="#{not periodo.periodoActual}"/>
                    <h:outputText value="Aperturado - Actual" rendered="#{periodo.periodoActual}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">Acciones</f:facet>
                    <center>
                        <p:commandButton id="btnCerrarPeriodo" value="Cerrar período" actionListener="#{gestionarPeriodosAdmisionController.cambiarEstadoListener(periodo)}" 
                                         update="dtPeriodos,:growl,btnCerrarPeriodo" icon="ui-icon-key" style="margin-right: 20px;"
                                         disabled="#{not periodo.periodoActual}" process="@this">
                            <f:setPropertyActionListener value="#{periodo}" target="#{gestionarPeriodosAdmisionController.periodoSeleccionado}" />
                        </p:commandButton>
                        <p:button value="Asignar cursos" outcome="asignarCursosPeriodo.jsf" icon="ui-icon-pencil" 
                                  title="Asignar maestrías o diplomados a este período">
                            <f:param name="periodId" value="#{periodo.periodoId}" />
                        </p:button>
                    </center>
                </p:column>
            </p:dataTable>

            <p:dialog id="dlgNuevoPeriodo" widgetVar="cardlgNuevoPeriodo"
                      header="Crear nuevo período" modal="true" height="165"
                      showEffect="explode" hideEffect="explode" resizable="false">
                <h:panelGrid columns="3">
                    <h:outputText value="Nombre: "/>
                    <p:inputText id="txtNombre" value="#{gestionarPeriodosAdmisionController.periodoNuevo.nombre}"
                                 required="true" label="Nombre"
                                 size="40"
                                 requiredMessage="Debe ingresar el nombre del período" /> 
                    <p:message for="txtNombre" /> 

                    <h:outputText value="Fecha de apertura: "/>
                    <p:calendar id="txtFechaApertura" value="#{gestionarPeriodosAdmisionController.periodoNuevo.fechaApertura}" 
                                required="true" label="Fecha de apertura"
                                requiredMessage="Debe ingresar la fecha de apertura"
                                size="40"/>  
                    <p:message for="txtFechaApertura" /> 

                    <h:outputText value="Fecha de cierre: "/>
                    <p:calendar id="txtFechaCierre" value="#{gestionarPeriodosAdmisionController.periodoNuevo.fechaCierre}" 
                                required="true" label="Fecha de cierre"
                                requiredMessage="Debe ingresar la fecha de cierre"
                                size="40"/>  
                    <p:message for="txtFechaCierre" /> 

                    <h:outputText value="Período actual" />
                    <h:selectBooleanCheckbox value="#{gestionarPeriodosAdmisionController.periodoActual}" />
                    <h:panelGroup />

                    <p:commandButton value="Guardar período" style="margin-top: 15px;"
                                     actionListener="#{gestionarPeriodosAdmisionController.guardarPeriodoListener}"
                                     oncomplete="handleLoginRequest(xhr, status, args);"
                                     update="dtPeriodos,:growl,dtPeriodos:btnCerrarPeriodo,txtNombre,txtFechaApertura,txtFechaCierre"
                                     process="@form"/>
                    <p:commandButton value="Cancelar" process="@none" onclick="cardlgNuevoPeriodo.hide();" style="margin-top: 15px;"/>
                </h:panelGrid> 
            </p:dialog>
        </h:form>

        <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                if(args.validationFailed) {  
                    jQuery('#dlgNuevoPeriodo').effect("shake", { times:3 }, 100);  
                } else {  
                    cardlgNuevoPeriodo.hide();  
                }  
            }  
        </script>
    </ui:define>

</ui:composition>
